import React, { useEffect, useState } from 'react';
import { Table } from 'antd';
import { connect } from 'dva';
import './index.less';

import HeaderSearch from './HeaderSearch'
import Paging from 'components/common/paging'
import repairCn from 'columns/deviceRepair'
import tools from '../common/tools'
import ListActions from './component/ListActions'
import { Popover } from 'antd'

function RepairSingle({ dispatch, keyId, query, deviceRepair: { repList } }) {

  // 初始化form表单数据
  const initForm = () => {

    // 是否从工作台过来，是则优先根据工作台的参数来获取数据
    if (query.codeText) {
      return {
        deviceName: '',//设备名称
        groupName: '',//使用部门
        repairClerk: '',//报修员
        repairman: '',//维修员
        repairmanTel: '',//维修员电话
        state: query.code ? query.code : '', //状态
        repairStartTime: '',//开始时间
        repairEndTime: '',//结束时间
        current: '1',// 当前页码
        size: '10',
      }
    } else {
      // 没有关闭页面得情况下，是否有缓存数据，有则优先展示缓存数据
      const formData = localStorage.getItem('formData')
      if (formData) {
        return JSON.parse(formData)
      }

      return {
        deviceName: '',//设备名称
        groupName: '',//使用部门
        repairClerk: '',//报修员
        repairman: '',//维修员
        repairmanTel: '',//维修员电话
        state: '', //状态
        repairStartTime: '',//开始时间
        repairEndTime: '',//结束时间
        current: '1',// 当前页码
        size: '10',
      }
    }
  }
  // 当前页码
  const [current, setCurrent] = useState('1')
  // 搜索框数据
  const [formData, setFormData] = useState(initForm())

  useEffect(() => {
    // 根据keyID来判断是否展示此页面，是才获取数据
    dispatch({
      type: 'deviceRepair/getSingleList',
      payload: { ...formData }
    })
    // 切换tabs缓存数据
    localStorage.setItem('formData', JSON.stringify(formData))
  }, [dispatch, formData]) // TODO: 加上keyID 会请求三次接口

  // 维修
  const handlePageChange1 = (page) => {
    dispatch({
      type: 'deviceRepair/getSingleList',
      payload: {
        ...formData,
        current: page
      }
    })
    localStorage.setItem('formData', JSON.stringify({
      ...formData,
      current: page
    }))
    setCurrent(page)
  }


  // 维修单的序号和操作
  repairCn.repairList[0].render = (t, r, i) => (repList.current - 1) * 10 + i + 1;
  repairCn.repairList[repairCn.repairList.length - 4].render = (t, r) => t ? t : '--';
  repairCn.repairList[repairCn.repairList.length - 3].render = (t, r) => t ? t : '--';
  repairCn.repairList[repairCn.repairList.length - 1].render = (t, r) => (
    <ListActions type={keyId} list={r} />
  )
  repairCn.repairList[repairCn.repairList.length - 2].render = (t, r) => (
    <span>{tools.showStatusText(r && r.status)}</span>
  )
  // 维修描述
  repairCn.repairList[3].render = (t, r) => {
    return (
      <>
        {
          t && t.length > 10
            ?
            <Popover content={t} placement="bottom" getPopupContainer={triggerNode => triggerNode.parentNode}>
              {/* <span style={{ cursor: 'pointer'}}> */}
              <span style={{ cursor: 'pointer' }}>
                {t.slice(0, 10) + '...'}
              </span>
            </Popover>
            :
            t
        }
      </>
    )
  }

  // 搜素查询数据
  const searchBtn = (values) => {
    setFormData(values)
  }

  return (
    <div className="repairSingle">
      {/* 头部搜索框 */}
      <HeaderSearch type={keyId} searchBtn={searchBtn} query={query} />
      <div style={{ padding: '0 .25rem'}}>
        <Table
          // loading={repList && repList.records ? false : true}
          columns={repList && repairCn.repairList}
          dataSource={repList && repList.records}
          pagination={false}
          bordered={true}
          className="self-table"
        // rowKey={(records) => records.orderId}
        />
        {/* 页码 */}
        <Paging
          total={repList && repList.total || 0}
          pageSize={10}
          handlePageChange={handlePageChange1}
          pageCount={repList && repList.current || 0}
          pages={repList && repList.pages || 0}
        />
      </div>
    </div>

  );
}

export default connect(({ deviceRepair }) => ({
  deviceRepair,
}))(RepairSingle);
